
<template>
  <Account>
    <template v-slot:header>
      <NavBar :title="currentCoin.name" />
    </template>
    <div class="withdraw">
      <div class="pc-box">
        <div class="l-f">
          <div class="nav-back l-f" @click="onBack">
            <img
              class="nav-back_icon"
              src="@/assets/icons/icon-left.svg"
              alt=""
            />
            <p class="nav-back_label">{{ $t("back") }}</p>
          </div>
        </div>
      </div>
      <div class="h5-box">
        <div class="withdraw_more l-f l-row-sb">
          <div class="withdraw_more_left l-f">
            <div class="withdraw_more_left_icon l-f l-row-c">
              <img
                class="withdraw_more_left_icon_img"
                src="@/assets/icons/icon-transaction.svg"
              />
            </div>
            <div class="withdraw_more_left_info">
              <p class="withdraw_more_left_info_title">
                {{ $t("account.transactionDetails") }}
              </p>
              <p class="withdraw_more_left_info_desc">
                {{ $t("account.viewYourHistory") }}
              </p>
            </div>
          </div>
          <img
            class="withdraw_more_right"
            src="@/assets/icons/icon-right.svg"
          />
        </div>
      </div>
      <div class="withdraw_head l-f l-row-sb">
        <div class="pc-box">
          <div class="l-f">
            <img
              class="withdraw_head_icon"
              src="@/assets/icons/icon-select_green.svg"
              alt=""
            />
            <div class="l-f withdraw_head_info">
              <img class="withdraw_head_info_icon" :src="currentCoin.icon" />
              <div>
                <p class="withdraw_head_info_label">{{ currentCoin.label }}</p>
                <p class="withdraw_head_info_name">{{ currentCoin.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="l-f">
          <a-radio :checked="true"></a-radio>
          <p class="withdraw_head_name">{{ currentCoin.name }}</p>
        </div>
      </div>
      <div class="withdraw_form">
        <a-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          layout="vertical"
        >
          <div class="l-f l-col-start withdraw_form_inputs">
            <a-form-item class="l-f1" :label="$t('account.amount')" name="amount">
            <div class="withdraw_form_input l-f">
                <p class="withdraw_form_input_unit">$</p>
              <AmountInput v-model="formData.amount" :placeholder="$t('account.enterWithdrawalAmount')" />
            </div>
          </a-form-item>
          <a-form-item class="l-f1" :label="$t('account.amountYouReceive')">
            <div class="withdraw_form_input l-f">
                <img class="withdraw_form_input_icon" :src="currentCoin.icon" />
                <p class="withdraw_form_input_show">{{computedAmount}}</p>
            </div>
           <div class="l-f l-row-sb">
            <p class="withdraw_form_exchange-desc"> {{$t('account.fee')}}: ${{numberFormat(computedFee,4)}}</p>
             <p class="withdraw_form_exchange-desc"> 1 {{currentCoin.name}} ≈ {{convertExchange == 0 ? $t('account.spotExchangeRate') : '$' + convertExchange}}</p>
           </div>
          </a-form-item>
          </div>
          <a-form-item class="l-f1" :label="$t('account.receiveAddress')" name="address">
            <div class="withdraw_form_input l-f">
              <input class="withdraw_form_input_value" v-model="formData.address" :placeholder="$t('account.enterWalletAddress')" />
            </div>
          </a-form-item>
          <a-form-item class="l-f1" :label="$t('account.withdrawalPassword')" name="payPassword">
            <div class="withdraw_form_input l-f">
              <input class="withdraw_form_input_value" v-model="formData.payPassword" :placeholder="$t('account.withdrawalPasswordPlaceholder')" />
            </div>
          </a-form-item>
        </a-form>
      </div>
      <p class="withdraw_desc">{{$t('account.addressDesc')}}</p>
      <a-button @click="onSubmit" class="withdraw_btn" type="primary">{{
        $t("account.confirm")
      }}</a-button>
    </div>
  </Account>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { useMainStore } from "@/store";
import { throttle, numberFormat } from "@/utils/index.js";

import { postWithdrawApi, getWithdrawFeeApi } from '@/api/userApi.js'

import Account from "@/views/account/index.vue";
import NavBar from "@/components/navBar/index.vue";
import AmountInput from "@/components/amountInput/index.vue";



const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const mainStore = useMainStore();

const currentCoin = reactive({
  id: 0,
  icon: "",
  label: "",
  name: "",
  address: "",
});

const fee = ref(0)
const formRef = ref(null);
const formData = reactive({
  amount: null,
  address: "",
  payPassword: ""
});
const formRules = {
  amount: [{ required: true, message: t("account.enterWithdrawalAmount"), trigger: "change" }],
  address: [
    { required: true, message: t("account.enterWalletAddress"), trigger: "change" },
  ],
  payPassword: [{ required: true, message: t("account.withdrawalPasswordPlaceholder"), trigger: "change" }],
};

// 汇率计算
const convertExchange = computed(() => {
  switch (currentCoin.name) {
    case "BTC":
      return mainStore.btcClose;
    case "ETH":
      return mainStore.ethClose;
    default:
      return 1;
  }
});

// 计算得到的金额
const computedAmount = computed(() => {
    if(formData.amount && formData.amount > 0 && convertExchange.value > 0) {
        return numberFormat((parseFloat(formData.amount) / convertExchange.value).toFixed(6), 6)
    }
    return 0
})
// 计算提现费
const computedFee = computed(() => {
  if(formData.amount && fee.value) {
    return (fee.value * formData.amount) / 100
  }
  return 0
})

onMounted(() => {
  let query = route.query;
  currentCoin.id = query.id;
  currentCoin.icon = query.icon;
  currentCoin.label = query.label;
  currentCoin.name = query.name;
  currentCoin.address = query.address;

  getWithdrawFee()
});

const onBack = () => {
  router.back();
};
const onSubmit = throttle(() => {
  formRef.value
    .validate()
    .then(async () => {
      if (formData.amount <= 0) {
        message.error(t("account.PleaseEnterTheRechargeAmount"));
        return;
      }
      const res = await postWithdrawApi({
        number: formData.amount,
        currency: currentCoin.id,
        usdtType: currentCoin.name,
        address: formData.address,
        payPassword:formData.payPassword
      });
      message.success(res);
      setTimeout(() => {
        router.replace("/withdrawList");
      }, 800);
    })
    .catch((error) => {
      console.log("error", error);
    });
}, 3000);

// 获取提现手续费
const getWithdrawFee = async () => {
  const res = await getWithdrawFeeApi()
  fee.value = parseFloat(res)
} 
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>